<template>
	<div
		:class="`${property}${index}`"
		style="
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: keep-all;
			white-space: nowrap;
			width: 100%;
		"
		:style="`max-height:${height ? `${height}px` : ''}`"
		v-if="item"
	>
		<el-popover
			:placement="placement"
			:width="width"
			:trigger="trigger"
			style="width: 100%"
			:content="item[property] ? item[property] : ''"
			v-if="tableDom(`${property}${index}`, item) || item[`${property}SetHint`]"
		>
			<span>
				<span v-if="isHtml" v-html="item[property]"></span>
				<span v-else>{{ item[property] }}</span>
			</span>
			<span slot="reference" style="width: 100%">
				<span v-if="isHtml" v-html="item[property]"></span>
				<span v-else>{{ item[property] }}</span>
			</span>
		</el-popover>
		<div v-else>
			<span v-if="isHtml" v-html="item[property]"></span>
			<span v-else>{{ item[property] }}</span>
		</div>
	</div>
</template>
<script>
	export default {
		name: `hintCom`,
		props: {
			// 数据属性名
			property: {
				type: String,
				default: String
			},
			// 数据源
			item: {
				type: Object,
				default: Object
			},
			// 循环索引
			index: {
				type: Number,
				default: Number
			},
			// 提示框宽度
			width: {
				type: Number,
				default: 200
			},
			// 触发方式 click/focus/hover/manual
			trigger: {
				type: String,
				default: 'hover'
			},
			// 出现位置 top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
			placement: {
				type: String,
				default: 'top-start'
			},
			isHtml: {
				type: Boolean,
				default: false
			},
			height: {
				// 容器高度
				type: Number,
				default: 0
			}
		},

		methods: {
			tableDom(className, obj) {
				this.$nextTick(() => {
					if (className && document.getElementsByClassName(className)) {
						const dom = document.getElementsByClassName(className)[0]
						if (dom) {
							/* dom.clientWidth 容器宽度, dom.scrollWidth 文本宽度 */
							if (dom.clientWidth < dom.scrollWidth || dom.clientHeight < dom.scrollHeight) {
								if (obj) {
									this.$set(obj, `${this.property}SetHint`, true)
								}
							} else {
								if (obj) {
									this.$set(obj, `${this.property}SetHint`, false)
								}
							}
						}
					}
				})
			}
		}
	}
</script>
